<h1>表单练习</h1>
<div class="margin-center">
  <h2>人员登记系统</h2>
  <div class="person-list">
    <ul>
      <li>姓名：<input type="text" [(ngModel)]="username"></li>
      <li>年龄：<input type="text" [(ngModel)]="age"></li>
      <li>性别：
        <input type="radio" name="sex" value="1" id="man" [(ngModel)]="sex"><label for="man">男</label>
        <input type="radio" name="sex" value="0" id="woman" [(ngModel)]="sex"><label for="woman">女</label>
      </li>
      <li>城市：
        <select name="city" id="city" [(ngModel)]="userCity">
          <option [value]="item" *ngFor="let item of cityList">{{item}}</option>
        </select>
      </li>
      <li>爱好：
        <span *ngFor="let item of hobbyList;let index = index">
          <input type="checkbox" name="hobby" [id]="'hobby'+index" [(ngModel)]="item.checked"><label [for]="'hobby'+index">{{item.title}}</label>
        </span>
      </li>
    </ul>

    <button (click)="handleClick()">获取绑定数据</button>

    <pre>
      <!-- 官方自带管道，将对象转化为json字符串 -->
      {{userInfor | json}}
    </pre>
  </div>
</div>